<template>
    <div ref="echartPie" style="width: 100%;height: 400px;"></div>
    <!-- <Echart v-if="flag" :options="pieOptions" :height="300" /> -->
</template>
<script setup lang="ts">
import { ref, onMounted,defineProps, watch, toRef } from 'vue'
import * as echarts from 'echarts';
import {getClassCount} from '@/api/table'
type EChartsOption = echarts.EChartsOption;

const props = defineProps({
    cid:{
        type:Number,
        default:0
    }
})
const cid = toRef(props,'cid')
const echartPie = ref(null)
let myChart=null
onMounted(() => {
    init()
})
const init =async () => {
    let res = null
    let datas = []
    if (props.cid) {
        res = await getClassCount(props.cid).catch(() => { })
    } else {
        res = await getClassCount().catch(() => { })
    }
    let sum=0
    if (res) {
        for (let i = 0; i < res.data.length; i++) {
            datas.push({ name: res.data[i].nickname, value: res.data[i].zs })
            sum+=res.data[i].zs
        }
    }
    var chartDom = echartPie.value;
    myChart = echarts.init(chartDom);
    var option: EChartsOption;
    option = {
        title: {
            text: '面试量统计',
            subtext: '当前面试总数('+sum+')',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '当前面试量',
                type: 'pie',
                radius: '50%',
                data: datas,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label:{
                    show:true,
                    formatter:'{b}:({d}%)'
                }
            }
        ]
    };
    option && myChart.setOption(option);
}
let resizeHandler = () => {
    myChart.resize();
}
window.addEventListener('resize', resizeHandler)

watch(cid,(n,o)=>{
    init()
},{
    immediate:true
})

</script>